<template>
  <div class="chat-panel">
    <div v-if="contact" class="title">
      <span class="user-code">{{contact.UserCode}}</span>
    </div>
    <div class="list">
      <div class="item" v-for="(item, index) in messages" :key="index" :class="{you: item.senderId !== contact.userid}">
        <small class="show-time" v-if="showTime(index)">{{item.timestamp | HHmm}}</small>
        <div class="talk">
          <div class="message">{{item.message}}</div>
          <img src="../../../assets/avatar.jpg" alt="">
        </div>
      </div>
    </div>
    <div class="send-message">
      <el-input @keyup.enter.native="sendMsg" placeholder="说点什么..." v-model="message"></el-input>
    </div>
  </div>
</template>

<script lang="ts">
  import {Component, Vue} from 'vue-property-decorator'
  import { mapState, mapActions } from 'vuex'
  @Component({
    components: {},
    computed: {
      ...mapState({
        contact: state => state.chat.contact,
        messages: state => state.chat.messages
      })
    },
    methods: {
      ...mapActions({
        sendMessage: 'socket/sendMessage'
      })
    }
  })
  export default class ChatPanel extends Vue {
    message = ''

    sendMsg () {
      if (this.message.trim()) {
        this.sendMessage(this.message)
        this.message = ''
      } else {
        this.$notify.error({
          title: '提示',
          message: '请输入内容'
        })
      }
    }

    showTime (index) {
      return index ? (this.messages[index].timestamp - this.messages[index - 1].timestamp >= 60000 ? 1 : 0) : 1
    }

  }
</script>

<style lang="scss" scoped>
  .chat-panel{
    .list{
      width: 100%;
      position: absolute;
      top: 50px;
      bottom: 40px;
      overflow-y: auto;
      padding: 15px;
      box-sizing: border-box;
      .item {
        position: relative;
        min-height: 35px;
        margin-bottom: 15px;
        overflow: hidden;
        .show-time {
          width: 36px;
          height: 20px;
          text-align: center;
          line-height: 16px;
          display: block;
          margin: 0 auto;
        }
        &.hasTime {
          padding-top: 15px;
          img {
            top: 15px !important;
          }
        }
        &.you {
          .talk {
            padding-left: 0px !important;
            padding-right: 45px;
          }
          img {
            left: inherit !important;
            right: 0 !important;
          ;
          }
          .message {
            padding-left: 0;
            padding-right: 45px;
            float: right !important;
            &:after {
              left: inherit !important;
              right: -3px !important;
              transform: rotate(-45deg) !important;
            }
          }
        }

        .talk {
          padding-left: 45px;
          overflow: hidden;
          position: relative;
          img {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 0;
          }
          .message {
            max-width: 143px;
            display: inline-block;
            background-color: #ffffff;
            padding: 7px 5px;
            border-radius: 4px;
            border: 1px solid #cccccc70;
            position: relative;
            &:after {
              content: '';
              width: 0;
              height: 0;
              display: block;
              border: 4px solid #fff;
              border-top-color: transparent;
              border-left-color: transparent;
              transform: rotate(135deg);
              position: absolute;
              left: -3px;
              top: 12px;
              box-shadow: 1px 1px 0 0 #cccccc70;
            }
          }
        }
      }
    }
    .send-message{
      border-top: 1px solid #ebeef5;
      height: 40px;
      position: absolute;
      width: 100%;
      bottom: 0;
    }
    .title{
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-bottom: 1px solid #ebeef5;
      .user-code{

      }
    }
  }
</style>
